<template>
  <div>
    <transition name="open" appear>
      <div class="pop" v-show="open">
        <header class="header">
          <span>预警处理</span>
          <i class="el-icon-close" @click="open=false"></i>
        </header>
        <div class="content">
          <p>下达{{type||'交通疏导指令'}}至
            <span>{{info||'李沧区交警支队'}}</span>
          </p>
        </div>
        <el-radio-group v-model="radio">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
        <el-button class="btn" @click="click" :loading="loading">确定</el-button>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: "Pop",
    props: {
      type: {
        type: String,
        default: '交通疏导指令'
      },
      info: {
        type: String,
        default: '李沧区交警支队'
      }
    },
    data() {
      return {
        open: false,
        loading: false,
        radio: 1,
      }
    },
    mounted() {

    },
    beforeDestroy() {

    },
    methods: {
      click() {
        this.loading = true

        let timer
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          this.loading = false
          this.open = false
          this.$message({
            message: '下发成功',
            type: 'success',
            duration:1500,
          });
        }, 1500)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .pop {
    width: 600px;
    height: 320px;
    background-color: rgba(27, 68, 120, 0.9);
    position: fixed;
    left: 0;
    right: 0;
    border-radius: 10px;
    bottom: 0;
    top: 0;
    pointer-events: fill;
    margin: auto;
    z-index: 10000;

    .header {
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      background-color: #3465B1;
      letter-spacing: 4px;

      span {
        font-size: 25px;
        color: #ffffff;
      }

      i {
        font-size: 27px;
        color: #ffffff;
        cursor: pointer;
      }
    }

    .content {

      padding: 30px 20px;

      p {
        font-size: 25px;
        color: #ffffff;
        letter-spacing: 2px;
        display: flex;
        justify-content: center;
      }

      span {
        font-size: 25px;
        color: #F1BB47;
        font-weight: 700;
      }
    }

    .btn {
      background: #00d0ffca !important;
      font-size: 22px;
      border-radius: 5px;
      border: none;
      color: #ffffff;
      padding: 10px 25px;
      position: absolute;
      right: 30px;
      letter-spacing: 5px;
      bottom: 30px;
    }

    .el-radio-group {
      width: 100%;
      display: flex;
      justify-content: center;


    }
  }

  .open-enter-active {
    animation: move 0.5s;
  }

  .open-leave-active {
    animation: move 0.5s reverse;
  }

  @keyframes move {
    from {
      transform: translateY(-100%);
    }

    to {
      transform: translate(0);
    }
  }
</style>